<template>
  <div>
    <!--  顶部导航栏区域-->
    <v-head></v-head>
<!--    商品区域-->
    <div class="line">
      <div class="all">
        <span>全部商品</span>
      </div>
    </div>
    <!--    分割线区域-->
    <div class="line1"></div>
<!--   购物车内商品展示-->
    <div style="width: 80%;margin-left: 80px;display: flex;flex-direction: row;">
    <div style="width: 10%;cursor: pointer;" @click="checkAll">全选</div>
      <div style="width: 52%;">商品信息</div>
      <div style="width: 14%;">单价</div>
      <div style="width: 11%;">数量</div>
      <div style="width: 10%;">金额</div>
      <div style="width: 6%;">操作</div>
    </div>
    <div class="goods">
<!--      每一个商品的展示区域-->
      <div class="goodsC" v-for="(item,i) in goods_list1" :key="i" >
        <div  class="check" :class="is_click[i]?'click':''" @click="click(i)"></div>
<!--        商品的照片展示-->
        <div  class="goods_pic" style="align-self: center">
          <img :src="item.pic_url" alt="">
        </div>
<!--        商品的名称展示-->
        <div class="goods_name">
          <p>{{item.goods_name}}</p>
        </div>
        <!--        商品的价格展示-->
        <div class="goods_price">
          ¥ {{item.goods_price}}.00
        </div>
        <!--        商品的数量选择-->
          <input type="text" style="height: 31px;width: 43px;font-size: 16px;padding-left: 5px;outline: none" v-model="item.goods_count">
        <div class="goods_num">
          <div class="btn">
            <button @click="sub(i)" :disabled="item.goods_count<=0">-</button>
            <button @click="add(i)" >+</button>
          </div>
        </div>
        <!--        单个商品的总价-->
        <div class="goods_total">¥ {{item.totalPrice}}.00</div>
<!--        删除按钮-->
        <div class="goods_del">
          <span id="remove" @click="remove(i)">移除</span>
        </div>
      </div>
    </div>
<!--    结算栏-->
    <div class="footer">
      <div class="left">
        <div id="all" :class="is_all?'check':''" style="cursor: pointer" @click="checkAll"></div>
        <span @click="checkAll" style="cursor: pointer">全选</span>
        <span style="color: gray;margin-left: 20px;cursor: pointer" @click="deleteByNum" >删除</span>
      </div>
      <div class="right">
        <span style="margin-right: 30px">已选商品<em style="color: rgb(255,0,54);font-size: 32px;font-weight: bolder;">{{finalTotalCount}}</em>件</span>
        <span>合计：<em style="color: rgb(255,0,54);font-size: 32px;font-weight: bolder;">{{finalTotalPrice|finalPrice}}</em></span>
        <div class="toOrder" @click="toOrder" >结算</div>
      </div>
    </div>
<!--    折扣付款的对话框-->
    <el-dialog
      title="确认付款"
      :visible.sync="dialogVisible"
      width="40%">
      <span>订单总价为 <strong >{{finalTotalPrice|finalPrice}}</strong> 元</span>
      <span v-if="finalTotalPrice < 300">， 实际付款 <strong >{{finalTotalPrice | finalPrice}}</strong> 元</span>
      <span v-if="finalTotalPrice >= 300">， 全场满300减30，实际付款 <strong > {{finalTotalPrice- 30 | finalPrice}}</strong> 元</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureToOrder">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import VHead from '../commom/Topbar'
export default {
  data() {
    return {
      //  是否登陆
      is_active: true,
      //  购物车商品绑定的列表
      goods_list: [],
      goods_list1: [],
      //  勾选中的商品（可以进行订单创建的信息）
      goods_list2: [],
      //  index信息
      index: {},
      //  商品id
      goods_id: [112, 135, 166, 114, 111],
      //  激活的商品
      is_click: [],
      //  最后的总价
      final: 0,
      //  是否全选
      is_all: false,
      //  点击全选的次数：0
      allClickNum: 0,
      //  是否弹出提示框
      is_alert: false,
      //  付款对话框的显示
      dialogVisible: false
    }
  },
  //  自定义组件
  components: {
    VHead
  },
  created () {
    this.getCartList()
  },
  computed: {
    //  最后总的价格
    finalTotalPrice() {
      var price = 0
      if (this.goods_list2.length !== 0 && this.goods_list2[0].date !== Date()) {
        for (const item of this.goods_list2) {
          price += item.goods_count * item.goods_price
        }
      }
      return price
    },
    //  最后总的商品数量
    finalTotalCount() {
      var count = 0
      for (const item of this.goods_list2) {
        count += item.goods_count
      }
      return count
    }
  },
  filters: {
    finalPrice(rawPrice) {
      return rawPrice + '.00'
    }
  },
  methods: {
    //  从后台获取购物车信息
    async getCartList1() {
      const cartId = 21
      console.log(typeof cartId)
      const { data: res } = await this.$http.get(`v2/cart/${cartId}`)
      if (res.meta.status !== 200) {
        console.log('获取数据失败')
        console.log(res)
      }
    },
    async getCartList() {
      if (this.$route.query.goods_id) {
        this.goods_id.push(this.$route.query.goods_id)
      }
      for (const item of this.goods_id) {
        // console.log(item)
        var { data: res } = await this.$http.get(`v2/goods/${item}`)
        if (res.meta.status !== 200) {
          return this.$message.error('获取商品失败！')
        }
        console.log(res.data)
        this.goods_list1.push(res.data)
      }
      for (const item of this.goods_list1) {
        item.goods_count = 1
        item.totalPrice = item.goods_price
        item.pic_url = item.pics[0].pics_sma_url
      }
      console.log(this.goods_list1)
    },
    //  退出登陆
    toLoginOut() {
      window.sessionStorage.clear()
      this.getCartList()
    },
    //  移除商品从购物车功能
    remove(index) {
      // console.log('移除操作展示！')
      this.goods_id.pop()
      this.goods_list1.splice(index, 1)
    },
    //  减少数量的函数
    sub(i) {
      this.goods_list1[i].goods_count--
      this.goods_list1[i].totalPrice = this.goods_list1[i].goods_count * this.goods_list1[i].goods_price
      this.$forceUpdate()
    },
    add(i) {
      console.log(this.goods_list2)
      this.goods_list1[i].goods_count++
      this.goods_list1[i].totalPrice = this.goods_list1[i].goods_count * this.goods_list1[i].goods_price
      this.$forceUpdate()
      this.finalTotalPrice()
    },
    //  勾选中商品
    click(i) {
      //  如果没有被勾选
      if (!this.is_click[i]) {
        this.is_click[i] = true
        this.goods_list2.push(this.goods_list1[i])
        for (const item of this.goods_list2) {
          item.date = new Date()
        }
      } else {
        //  这里是取消勾选
        this.goods_list2.pop()
        this.is_click[i] = false
      }
      this.$forceUpdate()
      console.log(this.goods_list2)
    },
    //  勾选所有的商品
    checkAll() {
      if (this.allClickNum % 2 === 0) {
        this.is_all = true
        for (let i = 0; i < this.goods_list1.length; i++) {
          this.is_click[i] = true
          this.goods_list2 = this.goods_list1
        }
        this.allClickNum++
      } else if (this.allClickNum % 2 === 1) {
        this.is_all = false
        for (let i = 0; i < this.goods_list1.length; i++) {
          this.is_click[i] = false
          this.goods_list2 = []
        }
        this.allClickNum++
      }
      this.$forceUpdate()
    },
    //  从cart中删除操作
    async deleteByNum() {
      if (this.goods_list2.length === 0) {
        this.$message.warning('请选择将要删除的商品')
      } else {
        const confimResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        console.log(confimResult)
        if (confimResult !== 'confirm') {
          return this.$message.info('取消删除！')
        }
        removePointById(this.goods_list1, this.goods_list2)
        this.goods_list2 = []
        this.is_click = []
      }
      //  从商品数组1中删除商品数组2中的数据
      function removePointById (arr1, arr2) {
        for (let i = 0; i < arr2.length; i++) {
          for (let j = 0; j < arr1.length; j++) {
            if (arr2[i] === arr1[j]) {
              const indexs = arr1.indexOf(arr1[j])
              arr1.splice(indexs, 1)
            }
          }
        }
        return arr1
      }
    },
    //  只有点击了确认按键才执行跳转操作
    sureToOrder() {
      this.toOrder()
      console.log('点击了按钮')
      this.$router.push({
        path: '/shop_order',
        //  绑定的数据是选中的购物车里面的商品
        query: {
          info: this.goods_list2
        }
      })
    },
    //  结算购物车
    toOrder() {
      if (this.goods_list2.length !== 0) {
        this.dialogVisible = true
        console.log(this.goods_list2)
      }
      //  跳转
      // this.$router.push({
      //   path: '/shop_order',
      //   //  绑定的数据是选中的购物车里面的商品
      //   query: {
      //     info: this.goods_list2
      //   }
      // })
    }
  }
}
</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei,serif,tahoma;
    /*background-color: #f1f1f1;*/
    >em{
      font-style: normal;
      color: rgb(255,0,54);
      margin: auto;
    }
  }
  .line {
    display: flex;
    flex-direction: row;
    justify-content: normal;
    align-items: normal;
    >.all{
      font-size: 20px;
      font-weight: 900;
      position: relative;
      left: 80px;
      top: 30px;
      color: rgb(255,0,54);
    }
  }
  .line1{
    border: 1px solid rgb(255,0,54);
    width: 80%;
    position: relative;
    left: 80px;
    margin-top: 40px;
  }
.goods{
  display: flex;
  flex-direction: column;
  justify-content: normal;
  align-items: normal;
  /*position: relative;*/
  margin-top: 50px;
  /*line-height: 80px;*/
  /*width: 80%;*/
  margin-left: 5%;
  margin-right: 10%;
  /*margin-left:80px;*/
  border: 1px solid gainsboro;
  >.goodsC{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    /*margin-top: 30px;*/
    border: 1px solid gainsboro;
    background: #f1f1f1;
    width: 100%;
    /*height: 120px;*/
    > .check.click{
      background: rgb(255,0,54);
    }
    >.check{
      border: 1px solid gainsboro;
      width: 12px;
      height: 12px;
      position: relative;
      left: -10px;
      align-self: center;
      background: #ffffff;
      /*width: 1%;*/
    }
    >.goods_pic{
      width: 10%;
      line-height: 10%;
      >img{
        width: 80px;
        height: 80px;
        border: 1px solid gainsboro;
      }
    }
    >.goods_name{
      width: 30%;
      height: 100px;
      line-height: 100px;
      margin-top: 10px;
      margin-bottom: 9px;
      font-size: smaller;
      /*text-align: center;*/
      >p{
        display:inline-block;
        vertical-align:middle;
        font-size:14px;
        line-height:25px;
      }
    }
    >.goods_price{
      width: 6%;
    }
    >.goods_num{
      position: relative;
      left: -60px;
      width: 6%;
      >.btn{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        line-height: 80px;
        font-size: 16px;
        >button{
          height: 20px;
          width: 20px;
          outline: none;
          border-radius: 0;
          margin-bottom: 2px;
          border: 1px solid black;
          font-size: 16px;
        }
      }
    }
    >.goods_total{
      margin-left: -70px;
      position: relative;
    }
  }
}
  #remove{
    cursor: pointer;
  }

  #remove:hover{
color: rgb(255,0,54);
  }
  .footer{
    height: 50px;
    width: 85%;
    margin-top: 30px;
    margin-left: 5%;
    line-height: 50px;
    background: #E5E5E5;
    >.left{
      float: left;
      >.check{
        background: rgb(255,0,54);
      }
      >span{
        margin-right: 10px;
      }
    }
    >.right{
      float: right;
      >.toOrder{
       display: inline-block;
        height: 100%;width: 120px;
        background:rgb(255,0,54);
        text-align: center;
        font-size: 32px;
        color: white;
        margin-left: 20px;
        cursor: pointer
      }
    }
  }
  #all{
    border: 1px solid gainsboro;
    width:12px;height: 12px;
    display: inline-block;
    align-self: center;margin-right: 12px;
    margin-left: 45px;
  }
  .el-dialog__body{
    font-size: 16px;
    >span>strong{
      color: rgb(255,0,54);
      display: inline-block;
      font-size: 20px;
      font-weight: 700;
    }
  }

</style>
